<template>
    <!-- password登录 -->
    <div class="password_contner">
        <div class="inputs">
            <div class="input_1">
                <input type="text" placeholder="手机/邮箱/用户名" v-model="p_longin_from.phone_or_email_or_username">
            </div>
            <div class="input_2">
                <input :type="is_show_pasword? 'text' : 'password'" placeholder="密码" v-model="p_longin_from.password">
                <span class="is_show_pasw"><span @click="toog_is_showpas_onfun" :style="is_show_pasword == true? 'float: right' : 'float: left'"></span></span>
            </div>
            <div class="input_3">
                <input placeholder="验证码" v-model="p_longin_from.captcha">
                <div class="captcha_box"><img src="http://localhost:4000/captcha" @click="updata_captcha_onfun"></div>
            </div>
        </div>
        <div class="login_btn" @click="p_login_onfun">登录</div>
        <div class="about_our"><a href="javascript:;">关于我们</a></div>
        <AlertTip :alertText="alertText" v-if="is_show_AlerTip" @closeTip="close_Tip_onfun" />
    </div>
</template>

<script>
    import {req_Pwd_Login} from '../../req/req_fun.js'
    
    export default {
        data () {
            return {
                is_show_pasword: false,
                p_longin_from: {
                    phone_or_email_or_username: '',
                    password: '',
                    captcha: ''
                },
                alertText: '',
                is_show_AlerTip: false
            }
        },
        methods: {
            // 切换密码显示与否
            toog_is_showpas_onfun() {
                this.is_show_pasword = !this.is_show_pasword;
            },
            // 错误提示(预验证)
            show_error_tip(text) {
                this.alertText = text;
                this.is_show_AlerTip = true;
            },
            // 关闭提示
            close_Tip_onfun() {
                this.is_show_AlerTip = false;
            },
            // 密码登录
            async p_login_onfun() {
                const {p_longin_from} = this
                if(!p_longin_from.phone_or_email_or_username) {
                    this.show_error_tip('用户名必须指定')
                } 
                else if(!p_longin_from.password) {
                    this.show_error_tip('密码必须指定')
                }else if(this.p_longin_from.captcha.length != 4) {
                    this.show_error_tip('验证码为4位')
                }else {
                    // 请求登录
                    const res_data = await req_Pwd_Login({
                        name: this.p_longin_from.phone_or_email_or_username,
                        pwd: this.p_longin_from.password,
                        captcha: this.p_longin_from.captcha
                    });
                    console.log(res_data);
                }
            },
            // 更新验证码
            updata_captcha_onfun(event) {
                event.target.src = 'http://localhost:4000/captcha?date=' + Date.now();
            }
            
        }
    }
</script>

<style lang="stylus" scoped>
    .password_contner
        .inputs
            position relative
            margin-top 20px
            &>div
                background-color #fff
                position relative
                left 50% 
                transform translateX(-50%) 
                width 340px
                height 54px
                border 1px solid #ccc
                padding 3px
                display flex
                align-items center
                &:nth-child(1)
                    margin-bottom 10px
                &:nth-child(3)
                    margin-top 30px
                    .captcha_box
                        height 100%
                        width 150px
                        // background-color red
                        img
                            height 100%
                            width 100%
                            // position absolute
                            // right 0px
                &:nth-child(2)
                    top 10px
                    .is_show_pasw
                        display block
                        width 40px
                        height 20px
                        border 1px solid #bbbb
                        border-radius 10px
                        margin-right 12px
                        span
                            float left
                            content: ''
                            display block
                            height 19px
                            width 19px
                            border 1px solid #bbbb
                            border-radius 50%
                            background-color yellow
                    
                input
                    flex 1
                    height 100%
                    border none
                    outline none
                    padding-left 20px
                    font-size 16px
                    min-width 100px
        .login_btn
            position relative
            left 50%
            margin-top 30px
            width 320px
            height 40px
            background-color #4cd96f
            border-radius 3px
            text-align center
            line-height 40px
            transform translateX(-50%)
            color #fff
        .about_our
            text-align center
            margin-top 20px
            a
                color #b8b8b8
                text-align center
</style>